<template>
  <el-dialog v-model="dialogVisible" title="增加用户对话框" width="800" align-center>
    <template #default>
      <el-form
        :model="formData"
        ref="vForm"
        :rules="rules"
        label-position="left"
        label-width="80px"
        size="default"
        @submit.native.prevent
      >
        <div class="table-container">
          <table class="table-layout">
            <tbody>
              <tr>
                <td class="table-cell">
                  <el-form-item label="用户名称" prop="userName" class="required">
                    <el-input
                      v-model="formData.userName"
                      type="text"
                      placeholder="请输入用户名称"
                      clearable
                    ></el-input>
                  </el-form-item>
                </td>
                <td class="table-cell">
                  <el-form-item label="昵称" prop="niceName" class="required">
                    <el-input
                      v-model="formData.niceName"
                      type="text"
                      placeholder="请输入昵称"
                      clearable
                    ></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="table-cell">
                  <el-form-item label="电话号码" prop="mobile" class="required">
                    <el-input
                      v-model="formData.mobile"
                      type="text"
                      placeholder="请输入电话号码"
                      clearable
                    ></el-input>
                  </el-form-item>
                </td>
                <td class="table-cell">
                  <el-form-item label="邮箱" prop="email" class="required">
                    <el-input
                      v-model="formData.email"
                      type="text"
                      placeholder="请输入邮箱"
                      clearable
                    ></el-input>
                  </el-form-item>
                </td>
              </tr>
              <tr>
                <td class="table-cell">
                  <el-form-item label="用户密码" prop="password" class="required">
                    <el-input
                      v-model="formData.password"
                      type="password"
                      placeholder="请输入密码"
                      clearable
                    ></el-input>
                  </el-form-item>
                </td>
                <td class="table-cell">
                  <el-form-item
                    label="确认密码"
                    prop="confirm"
                    class="required"
                    :error="confirmErr"
                  >
                    <el-input
                      v-model="formData.confirm"
                      type="password"
                      placeholder="请输入确认密码"
                      clearable
                    ></el-input>
                  </el-form-item>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </el-form>
    </template>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm()">取消</el-button>
        <el-button type="primary" @click="submitForm()"> 确认 </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import axios from "axios";
import { ElMessage } from "element-plus";
export default {
  name: "AddUser",
  components: { ElMessage },
  props: [],
  data() {
    return {
      confirmErr: "",
      dialogVisible: false,
      formData: {
        userName: "",
        niceName: "",
        mobile: "",
        email: "",
        password: "",
        confirm: "",
      },
      rules: {
        userName: [
          {
            required: true,
            message: "字段值不可为空",
          },
          {
            pattern: /^[A-Za-z,0-9]+$/,
            trigger: ["blur", "change"],
            message: "字母和数字",
          },
        ],
        niceName: [
          {
            required: true,
            message: "字段值不可为空",
          },
          {
            pattern: /^[一-龥]+$/,
            trigger: ["blur", "change"],
            message: "中文",
          },
        ],
        mobile: [
          {
            required: true,
            message: "字段值不可为空",
          },
          {
            pattern: /^[1][3-9][0-9]{9}$/,
            trigger: ["blur", "change"],
            message: "11手机号码",
          },
        ],
        email: [
          {
            required: true,
            message: "字段值不可为空",
          },
          {
            pattern: /^([-_A-Za-z0-9.]+)@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/,
            trigger: ["blur", "change"],
            message: "邮箱",
          },
        ],
        password: [
          {
            required: true,
            message: "字段值不可为空",
          },
          {
            pattern: /^[A-Za-z0-9]+$/,
            trigger: ["blur", "change"],
            message: "字母和数字",
          },
        ],
        confirm: [
          {
            required: true,
            message: "字段值不可为空",
          },
          {
            pattern: /^[A-Za-z0-9]+$/,
            trigger: ["blur", "change"],
            message: "字母和数字",
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.$bus.on("openDialog", () => {
      this.dialogVisible = true;
    });
  },
  unmounted() {
    this.$bus.off("openDialog");
  },
  methods: {
    submitForm() {
      this.$refs["vForm"].validate((valid) => {
        if (!valid) return;
        if (this.formData.password !== this.formData.confirm) {
          this.confirmErr = "密码不一致";
          return;
        }
        axios
          .post("/api/user/addUser", this.formData)
          .then((data) => {
            // console.info(`add User success: ${JSON.stringify(data)}`);

            if (data.data.success) {
              ElMessage({
                message: data.data.msg,
                type: "success",
              });
              this.dialogVisible = false;
              this.$bus.emit("queryUserList");
            } else {
              ElMessage({
                message: data.data.msg,
                type: "error",
              });
            }
          })
          .catch((err) => {
            // console.error(`add User success: ${JSON.stringify(err)}`);
            ElMessage({
              message: "请联系管理员",
              type: "error",
            });
          });
      });
    },
    resetForm() {
      this.confirmErr = "";
      this.dialogVisible = false;
      this.$refs["vForm"].resetFields();
    },
  },
};
</script>

<style lang="scss">
.el-input-number.full-width-input,
.el-cascader.full-width-input {
  width: 100% !important;
}

.el-form-item--medium {
  .el-radio {
    line-height: 36px !important;
  }

  .el-rate {
    margin-top: 8px;
  }
}

.el-form-item--small {
  .el-radio {
    line-height: 32px !important;
  }

  .el-rate {
    margin-top: 6px;
  }
}

.el-form-item--mini {
  .el-radio {
    line-height: 28px !important;
  }

  .el-rate {
    margin-top: 4px;
  }
}

.clear-fix:before,
.clear-fix:after {
  display: table;
  content: "";
}

.clear-fix:after {
  clear: both;
}

.float-right {
  float: right;
}
</style>

<style lang="scss" scoped>
div.table-container {
  table.table-layout {
    width: 100%;
    table-layout: fixed;
    //border-collapse: collapse;

    td.table-cell {
      display: table-cell;
      height: 36px;
      //border: 1px solid #e1e2e3;
    }
  }
}

div.tab-container {
}

.label-left-align ::v-deep .el-form-item__label {
  text-align: left;
}

.label-center-align ::v-deep .el-form-item__label {
  text-align: center;
}

.label-right-align ::v-deep .el-form-item__label {
  text-align: right;
}

.custom-label {
}

.static-content-item {
  min-height: 20px;
  display: flex;
  align-items: center;

  ::v-deep .el-divider--horizontal {
    margin: 0;
  }
}
</style>

<style>
.el-input__wrapper {
  margin-right: 10px !important;
}
</style>
